<template>
	<view class="todo-container">
		<!-- 标题容器 -->
		<view class="title-wrap">
			<text class="title">小黑记事本</text>
			<image src="/static/记事本.png"></image>
		</view>
		<view class="todo-wrapper">
			<!-- 输入区域盒子 -->
			<view class="input-wrapper">
				<!-- 输入框 -->
				<input
					v-model="ipt"
					@confirm="addTodo"
					placeholder="请输入内容"
					type="text"
				/>
			</view>
			<!-- 列表区域盒子 -->
			<view class="list-wrapper">
				<!-- 列表项 -->
				<view v-for="item in list" :key="item.id" class="item-wrapper">
					<text class="item-text">{{ item.todo }}</text>
					<icon @tap="removeItem(item.id)" type="clear"></icon>
				</view>
			</view>
			<!-- 底部区域 -->
			<view class="footer-wrapper">
				<!-- 计数区域 -->
				<view class="num">{{ list.length }} items left</view>
				<!-- 清空按钮 -->
				<view @tap="clear" class="clear-btn">Clear</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, watch } from 'vue'
	/**
	 * 1. 列表： 对象数组{id,todo}，v-for
	 * 2. 添加：双向数据绑定，回车（提交），添加数组，时间戳
	 * 3. 删除：点击事件，传递数据，根据 id 删除即可
	 * 4. 个数统计：数组的 length
	 * 5. 清空: 数组设置为[]
	 * 6. 持久化：
	 * 		默认读取并设置，为空的情况
	 * 		数据修改之后保存到缓存中
	 */

	const res = uni.getStorageSync('todo')
	console.log(res)

	const list = ref(
		res || [
			{ id: 1, todo: '写鸿蒙' },
			{ id: 2, todo: '写前端' },
		]
	)
	const ipt = ref('')
	// 添加列表哦
	const addTodo = () => {
		if (ipt.value === '') return
		// console.log(ipt.value)
		list.value.push({
			id: Date.now(),
			todo: ipt.value,
		})
		ipt.value = ''
	}
	// 点击删除
	const removeItem = (id) => {
		// console.log(id)
		// console.log(list.value.filter((v) => v.id !== id))
		list.value = list.value.filter((v) => v.id !== id)
	}

	// 清空
	const clear = () => {
		list.value = []
	}

	// 数据改变，执行逻辑 更新到缓存中
	watch(
		list,
		() => {
			// console.log('list改变啦~')
			// list 默认使用时被 ref 包装之后的值
			// 有很多为了跟踪数据变更才添加的属性
			// uni.setStorageSync('todo', list)
			uni.setStorageSync('todo', list.value)
		},
		{ deep: true }
	)
</script>

<style>
	page {
		background-color: #f5f5f5;
		padding: 0 30px;
		box-sizing: border-box;
	}
	.title-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.title-wrap image {
		width: 150rpx;
		height: 150rpx;
	}

	.title {
		font-size: 35px;
		color: #be5959;
		display: block;
		text-align: center;
	}

	.todo-wrapper {
		box-shadow: 0 -1px 2px #c8c8c8;
		margin-top: 30px;
		background-color: white;
	}

	.input-wrapper input {
		background-color: white;
		height: 40px;
		padding-left: 10px;
	}

	.list-wrapper {
		border-top: 1px solid #dad8d8;
	}

	.list-wrapper .item-wrapper {
		height: 40px;
		display: flex;
		font-size: 18px;
		align-items: center;
		padding-left: 10px;
		position: relative;
		border-bottom: 1px solid #dad8d8;
	}

	.list-wrapper .item-wrapper icon {
		position: absolute;
		right: 10px;
	}

	.todo-wrapper .footer-wrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 10px;
		height: 40px;
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6,
			0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6,
			0 17px 2px -6px rgba(0, 0, 0, 0.2);
	}

	.todo-wrapper .footer-wrapper view {
		color: #808091;
		font-size: 12px;
	}
	.logo {
		height: 56px;
		width: 207px;
		display: block;
		margin: 50px auto;
	}
</style>
